<template>
  <div class="mySelect_class">
    <div v-if="label" class="lable_sty">{{ label }}</div>
    <el-select v-model="inputValue" :multiple-limit="0" filterable remote reserve-keyword :placeholder="placeholder"
      :disabled="disabled" :remote-method="remoteMethod" :loading="loading" clearable @change="emitInput">
      <el-option v-for="item in options" :key="item.value" :value="item[optionValue]" :label="item[optionLable]">
        <span v-if="labelType == 1">{{ item.label }}</span>
        <span v-else>{{ item.value + "——" + item.label }}</span>
        <slot></slot>
      </el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref, watch, toRefs } from "vue";

let lable_width = ref("");
onMounted(() => {
  lable_width.value = props.lable_width;
});

const emit = defineEmits(["update:modelValue", "remoteMethod", "roadName"]);
let props = defineProps({
  value: {
    type: String,
    default: "",
  },
  label: {
    type: String,
  },
  lable_width: {
    type: String,
    default: "100px",
  },
  placeholder: {
    type: String,
    default: "",
  },
  clearable: {
        type: Boolean,
        default: true,
    },
  multiple: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: "large",
  },
  options: {
    type: Array,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  labelType: {
    type: Number,
    default: 1,
  },
  modelValue: [String, Number],
  optionValue: {
    type: String,
    default: "value",
  },
  optionLable: {
    type: String,
    default: "label",
  },
  loading: Boolean,
});

// 监听文本框输入
const inputValue = ref(props.modelValue);
let roadNames = ref("");
watch(
  () => props.modelValue,
  (newValue) => {
    inputValue.value = newValue;
  }
);
const emitInput = () => {
  emit("update:modelValue", inputValue.value);
  props.options.forEach((item) => {
    if (item.roadName === inputValue.value) {
      roadNames.value = item.roadNo;
    }
  });
  emit("roadName", roadNames.value);
};
const remoteMethod = (query) => {
  emit("remoteMethod", query);
};
</script>

<style lang="less" scoped>
// .lable_top {
//     width: v-bind(lable_width);
//     text-align: right;
//     font-size: 16px;
// }

.lable_sty {
  font-weight: normal !important;
  font-size: 16px;
  color: #606266;
  display: flex;
  align-items: center;
  justify-content: start;
  min-width: 80px !important;
  margin-right: 5px;
}

.mySelect_class {
  display: flex;
  align-items: center;
  font-size: 16px;
}
</style>
